<!-- 变更记录修改table -->
<template>
  <div class='role_log'>
    <Row :gutter="16" type="flex" justify="start">
      <Col span="24" class="tips">
      <Icon type="md-alert" class="tips_icon" />
      <span class="AssignCustomers_name">编辑角色日期时，请保证角色生效日期与分摊比例生效日期保持一致</span>
      </Col>
    </Row>
    <Table ref="TableHeight" :max-height="500" :columns="columns" :data="tableList" border>
      <!-- 审核人类型 -->
      <template slot-scope="{ row }" slot="effectiveDate">
        <DatePicker v-if="row.flag?row.flag:false" type="date" v-model="row.effectiveDate"
          :options="options" placeholder="Select date" :transfer="true"
          @on-change="data=>{handleChange(data,row)}" :clearable=false>
        </DatePicker>
        <span v-if="!row.flag">{{row.effectiveDate}}</span>
      </template>
      <template slot-scope="{ row }" slot="operate">
        <div v-show="!row.flag" class="operate_btn">
          <Button type='text' size='small' :disabled='btnFlag'
            @click="editFun(row)">编辑</Button>
        </div>
        <div v-show="row.flag" class="operate_btn">
          <Button type='text' size='small' @click="confirm(row)">确定</Button>
          <Button type='text' size='small' @click="cancel(row)">取消</Button>
        </div>
      </template>
    </Table>
  </div>
</template>

<script>
  import editColumns from './opt/roleLogColumn'
  import moment from 'moment'
  import teamsApi from '@/biz/buildingManagement/teams'

  export default {
    data() {
      return {
        tableList: [],
        columns: editColumns.Columns,
        options: {},
        btnFlag: false,
        startDate: '',
        endDate: '',
        currentChangeDate: '', //记录发生改变的数据
        oldDate: {}
      };
    },
    methods: {
      onChangetable(row) {
        let list = this.tableList
        list.splice(row._index, 1, row)
      },
      editFun(data) {
        let that = this
        this.currentChangeDate = '' //清空上一次改变时存储的数据
        this.btnFlag = true
        data.flag = true
        this.oldDate = data
        if (data._index == 0) {
          //首条记录不得早于进场日期
          this.startDate = ''
          if (this.tableList.length == 1) {
            this.endDate = moment(Date.now() + 86400000).format('YYYY-MM-DD')
          } else {
            this.endDate = this.tableList[(data._index + 1)].effectiveDate
          }
        } else if (data._index == this.tableList.length - 1) {
          //最后一条记录不得晚于今日
          this.startDate = this.tableList[(data._index - 1)].effectiveDate
          this.endDate = moment(Date.now() + 86400000).format('YYYY-MM-DD')
        } else {
          //可选生效日期必须大于等于上一条数据的生效日期且小于下一条数据的生效日期
          this.startDate = this.tableList[(data._index - 1)].effectiveDate
          this.endDate = this.tableList[(data._index + 1)].effectiveDate
        }
        this.options = {
          disabledDate(date) {
            return date && (date.valueOf() < Date.parse(that.startDate) - 86400000 || date
              .valueOf() > Date.parse(that.endDate) - 86400000)
          }
        }
        this.onChangetable(data)
      },
      //发生改变
      handleChange(date) {
        this.currentChangeDate = date
      },
      cancel(data) {
        this.btnFlag = false
        this.oldDate.flag = false
        this.onChangetable(this.oldDate)
      },
      confirm(data) {
        // if (this.currentChangeDate) {
        //   data.effectiveDate = moment(this.currentChangeDate.effectiveDate).format(
        //     'YYYY-MM-DD')
        // } else {

        // }
        data.effectiveDate = moment(data.effectiveDate).format('YYYY-MM-DD')
        this.onChangetable(data)
        console.log(data, this.currentChangeDate, '@@@@')
        let params = {
          effectiveDate: data.effectiveDate,
          id: data.id
        }
        teamsApi.editUserLog(params).then((res) => {
          data.flag = false
          this.btnFlag = false
          this.$emit('changeTableSuccess')
        })


      },
    },
    mounted() {
      editColumns.sendThis(this) //发送this 到 js 文件里
    },

  }
</script>
<style lang='scss' scoped>
  .role_log {
    .tips {
      text-align: center;
      margin-bottom: 15px;
      background-color: rgba(254, 252, 236, 1);
      width: auto;
      line-height: 32px;

      .tips_icon {
        font-size: 20px;
        color: #0f42a7;
      }

      .AssignCustomers_name {
        margin-left: 10px;
        cursor: pointer;
        color: #0f42a7;
      }
    }
  }
</style>